<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM编程</title>
		<style type="text/css">
			#rili {
				background-image: url("image/cald.png");
				width: 150px;
				height: 138px;
			}
			#time0 {
				background-image: url("image/clock.png");
				width: 240px;
				height: 146px;
			}
			#rl {
				background-color: #cecece;
				width: 240px;
				height: 300px;
				position: absolute;
				left: 50%;
				top: 45%;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}

			p {
				margin: 0;
			}

			#wd {
				width: 80px;
				height: auto;
				color: white;
				font-size: 25px;
			}

			#hd {
				width: 120px;
				font-size: 95px;
				font-weight: bolder;
				margin-top: -20px;
			}
			#tm {
				color: white;
				align: center;
				width: 200px;
				padding-top: 30px;
				font-size: 55px;
			}
		</style>
	</head>
	<body>
		<div id="rl">
			<div id="rili" align="center">
				<p id="wd" align="center"></p>
				<p id="hd" align="center"></p>
			</div>
			<div id="time0" align="center">
				<p id="tm"></p>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 显示日历
		// 利用尾调函数进行循环
		function show() {
			var mytime = new Date();
			// 利用数组加载星期几
			var weekday = new Array(7);
			weekday[0] = "星期日";
			weekday[1] = "星期一";
			weekday[2] = "星期二";
			weekday[3] = "星期三";
			weekday[4] = "星期四";
			weekday[5] = "星期五";
			weekday[6] = "星期六";
			var day = document.getElementById("wd");
			day.innerHTML = weekday[mytime.getDay()];
			// 显示号数
			var h = mytime.getDate();
			var day1 = document.getElementById("hd");
			day1.innerHTML = h;
			// 显示具体时间：时：分：秒
			var h = mytime.getHours();
			var m = mytime.getMinutes();
			var s = mytime.getSeconds();
			var str = `${h}:${m}:${s}`;
			// 时间数小于10时，以下列语句进行显示双位数字
																			// 179000910陈润强
			if (m < 10) {
				var str = `${h}:0${m}:${s}`;
			}
			if (h < 10) {
				var str = `0${h}:${m}:${s}`;
			}
			if (s < 10) {
				var str = `${h}:${m}:0${s}`;
			}
			if(m < 10 && h < 10){
				var str = `0${h}:0${m}:${s}`;
			}
			if(m < 10 && s < 10){
				var str = `0${h}:${m}:0${s}`;
			}
			if(s < 10 && h < 10){
				var str = `${h}:0${m}:0${s}`;
			}
			if(m < 10 && h < 10 && s < 10){
				var str = `0${h}:0${m}:0${s}`;
			}
			document.querySelector("#tm").innerHTML = str;
			
			setTimeout(show, 1000);
		}
		window.onload = function() {
			show();
		}
		show();
	</script>
</html>
